import React, {PureComponent} from 'react';
import FormCore from '../../../components/display/form/formCore';
import PropTypes from 'prop-types';
import {initModals} from "../../../state/action/comAction";

class WriteForm extends PureComponent{
  constructor (props) {
    super(props);
    this.props = props;
    this.layout = [
      'inline', // 横向布局
      'vertical', // 弹窗布局
      'horizontal' // 纵向布局
    ];
    this.state = {
      formConfig: {
        childItems: [],
        layout: this.layout[0],
        formTarget: ''
      }
    };
  }

  static contextTypes = {
    store: PropTypes.object.isRequired
  }

  componentWillMount () {
    // 配置formItem的构建信息
    this.setState({
      formConfig: {
        childItems: [
          {
            type: 'input',
            inputType: 'textarea',
            placeholder: '请输入回复信息',
            defaultValue: '小明，快去吃羊肉串',
            param: {
              name: 'desc',
              type: 'string'
            },
            required: !0,
            validator: {
              vtype: 'length',
              min_val: 4,
              max_val: 50
            },
            labelName: '回复内容',
          },
          {
            type: 'buttonGp', // 表单最终执行组
            buttonArr: [
              {
                btnType: 'submit',
                text: '回复'
              },
              {
                btnType: 'reset',
                text: '清空'
              }
            ]
          },
        ], // 设置表单元素
        layout: this.layout[this.props.layout] || this.layout[1], // 设置布局 0： 横向布局， 1：弹窗布局 2： 全页表单布局
        formTarget: 'refresh', // 表单提交类型，设置grid则为更新grid
        defaultParams: { // 多个默认参数可以在这里设置，不需要使用disabled
          id: this.context.store.getState().modalInfo.param // 注入打开modal的对应ID
        },
        context: this
      }
    });
  }

  fetchApi (param) {
    // 当设置formTarget为ajax时，执行自定义提交事件。
    if (this.state.formConfig.formTarget === 'grid') {
      return;
    }
    // 请求fetch 对象，带入生成参数
    // 如果在modal中的表单提交，请执行这里
    if (this.props.modalSubmit) {
      return this.props.modalSubmit(param);
    } else {
      // 如果正常页面中的表单提交，请执行下面
      // TODO 执行异步请求或其他
      return;
    }
  }

  render () {
    return <FormCore formConfig={this.state.formConfig} fetchApi={this.fetchApi.bind(this)}/>
  }
}

export default WriteForm;

WriteForm.propsType = {
  layout: PropTypes.string,
  modalSubmit: PropTypes.func
}
